@charset "utf-8";
@import "_reset.scss";
@function r($px){
	@return $px / 64px *1rem;
}
.wrap{
	width:r(640px);
	background-color:#f3f4f6;
	.header{
		position:fixed;
		top:0;
		width:100%;
		height:r(87px);
		background-color:#f7f7f7;
		font-size:r(28px);
		border-bottom:1px solid #e3e3e3;
		z-index:5;
		display:flex;
		.header_left{
			width:r(22px);
			height:r(37px);
			float:left;
			margin-left:r(29px);
			margin-top:r(26px);
			img{
				height:100%;
			}
		}
		.nav{
			margin-left:r(75px);
			line-height:r(87px);
			li{
				float:left;
				a{
					color:#333333;
					font-size:r(35px);
					height:r(83px);
					margin:{
						left:r(25px);
						right:r(25px);
					}
				}
				&:first-of-type a{
					color:#d62d31;
					&::after{
						display:block;
						margin:0 auto;
						position: relative;
						top:r(-7px);
						content:"";
						width:70%;
						height:r(4px);
						background:#d62d31;
					}
				}
			}
			&:last-of-type::after{
				display:block;
				clear:both;
				content:"";
			}
		}
	}
	.content{
		margin-top:r(87px);
		background-color:#f3f4f6;
		.lunbo{
			border-bottom:1px solid #e3e3e3;
			.swiper-slide{
				width:r(640px);
				height:r(640px);
				img{
					width:100%;
					height:100%;
				}
			}
		}
		.item{
			width:100%;
			// height:r(542px);
			margin-bottom:r(20px);
			background:#fff;
			.title{
				width:100%;
				height:r(120px);
				display:flex;
				align-items:center;
				h2{
					width:90%;
					font-size:r(30px);
					color:#333333;
					padding-left:r(20px);
				}
				label{
					.icon-ic_chevron_right_px{
						font-size:r(60px);
						color:#bfbfbf;
					}
				}
			}
			.pirce{
				width:100%;
				height:r(130px);
				border-bottom:1px solid #e3e3e3;
				p{
					margin-left:r(20px);
					color:#999999;
					font-size:r(28px);
					&:first-of-type{
						padding-bottom:r(20px);
					}
					span{
						margin-left:r(26px);
						color:#000;
					}
					.red{
						color:#cc3333;
					}
				}
			}
			.size{
				width:100%;
				height:r(96px);
				border-bottom:1px solid #e3e3e3;
				p{
					margin-left:r(20px);
					color:#999999;
					font-size:r(28px);
					line-height:r(96px);
					span{
						margin-left:r(26px);
						color:#000;
					}
					.icon-ic_chevron_right_px{
						font-size:r(60px);
						color:#bfbfbf;
						vertical-align: middle;
						margin-left:r(240px);
					}
				}
			}
			.shengyu{
				width:100%;
				height:r(96px);
				border-bottom:1px solid #e3e3e3;
				p{
					margin-left:r(20px);
					color:#999999;
					font-size:r(28px);
					line-height:r(96px);
					span{
						margin-left:r(26px);
						color:#000;
					}
				}
			}
			.yunfei{
				width:100%;
				height:r(96px);
				border-bottom:1px solid #e3e3e3;
				p{
					margin-left:r(20px);
					color:#999999;
					font-size:r(28px);
					line-height:r(96px);
					span{
						margin-left:r(26px);
						color:#000;
					}
					.sell{
						color:#999999;
						margin-left:r(100px);
						font-size: r(24px);
					}
				}
			}
		}
		.shop{
			width:100%;
			// height:r(368px);
			background-color:#fff;
			border-top:1px solid #e3e3e3;
			border-bottom:1px solid #e3e3e3;
			.shopheader{
				width:100%;
				.header_left{
					margin-top:r(25px);
					width:r(96px);
					height:r(96px);
					margin-left:r(20px);
					display:inline-block;
					img{
						width:100%;
						border-radius:50%;
						border:1px solid #e3e3e3;
					}
				}
				.header_cen{
					margin-top:r(25px);
					width:r(280px);
					height:r(96px);
					display:inline-block;
					vertical-align:top;
					.name{
						font-size:r(30px);
						color:#333333;

					}
					p{
						margin-top:r(18px);
						font-size:r(24px);
						color:#999999;
					}
				}
				.header_right{
					margin-top:r(25px);
					display:inline-block;
					width:r(200px);
					height:r(96px);
					vertical-align:top;
					span{
						display:inline-block;
						vertical-align:middle;
						width:r(115px);
						height:r(50px);
						color:#fff;
						background-color:#83d050;
						text-align:center;
						line-height:r(50px);
						font-size:r(24px);
						border-radius:5px;
					}
					.icon-ic_chevron_right_px{
						color:#bfbfbf;
						font-size:r(60px);
					}
				}
			}
			.shopcen{
				width:100%;
				height:r(150px);
				ul{
					li{
						width:33%;
						height:r(110px);
						float:left;
						text-align:center;
						&:first-of-type,&:nth-of-type(2){
							border-right:1px solid #e3e3e3;
						}
						&:last-of-type{

							img{
								margin-left:r(30px);
								width:r(28px);
								height:r(28px);
							}
						}
						p{
							font-size:r(24px);
							color:#999999;
							margin-top:r(18px);
						}
						.all,.sellNum{
							color:#333333;
							cont-size:r(26px);
							font-weight:bold;
						}
					}
					&::after{
						content:"";
						display:block;
						clear:both;
					}
				}
			}
			.shopbot{
				width:100%;
				// height:r(100px);
				text-align:center;
				.callkefu{
					display:inline-block;
					vertical-align:top;
					width:r(288px);
					height:r(63px);
					text-align:center;
					line-height:r(63px);
					border-radius:5px;
					border:1px solid #e3e3e3;
					color:#333333;
					font-size:r(26px);
				}
				.joinshop{
					display:inline-block;
					vertical-align:top;
					width:r(288px);
					height:r(63px);
					text-align:center;
					line-height:r(63px);
					border-radius:5px;
					border:1px solid #e3e3e3;
					color:#333333;
					font-size:r(26px);
				}
			}
		}
		.tuwen{
			width:100%;
			height:r(100px);
			margin-bottom:r(100px);
			border-top:1px solid #e3e3e3;
			background-color:#fff;
			text-align:center;
			line-height:r(100px);
			font-size:r(30px);
			color:#999999;
		}
	}
	.bottom{
		width:100%;
		height:r(100px);
		position:fixed;
		bottom:0;
		left:0;
		border-top:1px solid #e3e3e3;
		background-color:#f8f8f8;
		ul{
			li{
				font-size:0;
				float:left;
				img{
					width:r(42px);
					height:r(42px);
					margin-top:r(17px);
				}
				&:first-of-type{
					width:r(98px);
					text-align:center;
					font-size:r(20px);
				}
				&:nth-of-type(2){
					width:r(98px);
					text-align:center;
					font-size:r(20px);
				}
				&:nth-of-type(3){
					width:r(98px);
					text-align:center;
					font-size:r(20px);
				}
				&:nth-of-type(4){
					width:r(205px);
					color:#fff;
					font-size:r(35px);
					text-align:center;
					line-height:r(100px);
					background-color:#cc3333;
				}
				&:last-of-type{
					width:r(140px);
					color:#fff;
					font-size:r(35px);
					text-align:center;
					line-height:r(100px);
					background-color:#e7a312;
				}
			}
			&::after{
				clear:both;
				display:block;
				content:"";
			}
		}
	}
	.toTop{
		position:fixed;
		right:r(20px);
		bottom:r(150px);
		display:block;
		img{
			width:r(80px);
		}
	}
	.buy{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		z-index:5;
		.buy_content{
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: #ffffff;
			transform: translate(-50%,-50%);
			width:r(530px);
			height:r(960px);
			.buy_head{
				width:100%;
				border-bottom:1px solid #e3e3e3;
				.img{
					display:inline-block;
					width:r(160px);
					height:r(160px);
					border:1px solid #e3e3e3;
					margin-top:r(20px);
					margin-left:r(20px);
					img{
						width:100%;
						height:100%;
					}
				}
				.name{
					display:inline-block;
					vertical-align:top;
					margin-top:r(20px);
					.p1{
						font-size:r(28px);
						color:#333333;
						width:r(317px);
						max-height:r(76px);
						-webkit-line-clamp:2;
						overflow:hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
					}
					.p2{
						font-size:r(30px);
						color:#cc3333;
					}
					.p3{
						font-size:r(24px);
						color:#999999;
					}
				}
			}
			.buy_guige{
				width:100%;
				margin-top:r(20px);
				font-size:0;
				>span{
					display:inline-block;
					font-size:r(28px);
					color:#666666;
					width:r(100px);
					margin-left:r(20px);
					height:r(52px);
					line-height:r(52px);
					text-align:center;
					vertical-align:top;
					&:nth-of-type(2){
						vertical-align:baseline;
					}
				}
				.buy_size{
					display:inline-block;
					width:r(390px);
					p{
						border:1px solid #e3e3e3;
						font-size:r(26px);
						color:#666666;
						height:r(50px);
						line-height:r(50px);
						border-radius:5px;
						margin-bottom:r(10px);
						text-align:center;
						&:first-of-type{
							width:r(370px);
						}
						&:nth-of-type(2){
							width:r(210px);
						}
						&:nth-of-type(3){
							width:r(260px);
						}
						&:last-of-type{
							width:r(370px);
						}
						&:hover{
							border:1px solid #cc3333;
						}
					}
				}
				.buy_num{
					display:inline-block;
					font-size:0;
					span{
						display:inline-block;
						width:r(70px);
						height:r(50px);
						font-size:r(28px);
						text-align:center;
						line-height:r(50px);
						&:first-of-type{
							border:1px solid #e3e3e3;
							border-top-left-radius:4px;
							border-bottom-left-radius:4px;
						}
						&:nth-of-type(2){
							border:{
								top:1px solid #e3e3e3;
								bottom:1px solid #e3e3e3;
							}
						}
						&:nth-of-type(3){
							border:1px solid #e3e3e3;
							border-top-right-radius:4px;
							border-bottom-right-radius:4px;
						}
					}
				}
			}
			.buy_btn{
				width:100%;
				height:r(100px);
				position:relative;
				bottom:r(-350px);
				font-size:0;
				.buybtn{
					width:50%;
					height:100%;
					display:inline-block;
					text-align:center;
					line-height:r(100px);
					color:#fff;
					background:#e7a312;
					font-size:r(35px);
				}
				.car{
					width:50%;
					height:100%;
					display:inline-block;
					text-align:center;
					line-height:r(100px);
					color:#fff;
					background:#cc3333;
					font-size:r(35px);
				}
			}
		}
	}
	.mask_s{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: none;
		z-index:9;
		.ms_content{
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: rgba(40,40,40,0.7);
			transform: translate(-50%,-50%);
			width:r(250px);
			height:r(185px);
			border-radius:15px;
			i{
				font-size:r(100px);
				color:#fff;
				text-align:center;
				display:block;
				margin-top:r(10px);
			}
			p{
				font-size:14px;
				text-align:center;
				color:#fff;
				margin-top:r(10px);
			}
		}
	}
}